


import {
  View, PickerView, Button, PickerViewColumn
} from "@tarojs/components";
import "./picker.scss";
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
import customParseFormat from 'dayjs/plugin/customParseFormat'
import { useState, useEffect } from "react";
import format from './format'

interface IProps {
  onCancel: (v?: any) => void
  mode: string
  onInitial: (v: any) => void
  onConfirm: (v: any) => void
  dateTime: any
  start: string
}
dayjs.extend(customParseFormat)
const DateTimePicker = (props: IProps) => {

  const [source, setSource] = useState([])

  const [value, setValue] = useState([])

  const [markMultiDateTime, setMarkMultiDateTime] = useState(false)

  useEffect(() => {
    const { dateTime, start } = props
    let mark = false
    if (dateTime && Array.isArray(dateTime)) {
      dateTime.map((dateTimeItem) => {
        //判断一维数组还是二维数组，分别对应单组选择和两组选择
        if (Array.isArray(dateTimeItem)) {
          mark = true
          // 取得格式化计算之后的结果
          const source1 = dateTimeItem && format(dateTimeItem, dayjs(start))
          // 后续需要source而不需要item的原因是source可能是多纬数组，每个纬度里面包含自己的item和value
          // this.setState((state) => ({
          //   ...state,
          //   source: [...state.source, source],
          //   value: [...state.value, source.value],
          // }))

          setSource([...source, source1])
          setValue([...value, source1.value])

          // this.setState((state) => ({ ...state, value: [...state.value, source.value] }))
        }
      })
      if (!markMultiDateTime) {
        const source1 = dateTime && format(dateTime, dayjs(start))
        // this.setState((state) => ({
        //   ...state,
        //   source: [...state.source, source],
        //   value: [...state.value, source.value],
        // }))
        setSource([...source, source1])
        setValue([...value, source1.value])
        // this.setState((state) => ({ ...state, source: [...state.source, source] }))
        // this.setState((state) => ({ ...state, value: [...state.value, source.value] }))
      }
      setMarkMultiDateTime(mark)
    }
    onInitial()
  }, [])

  const onChange = (e, index) => {
    const _value = [...value]
    _value[index] = e.detail.value
    setValue(_value)
  }

  const onInitial = () => {
    const { onInitial, mode } = props
    // 根据返回格式(mode)来格式化选中的时间
    onInitial && onInitial(getDayjs(mode))
  }

  const onConfirm = () => {
    const { onConfirm, mode } = props
    onConfirm && onConfirm(getDayjs(mode))
  }

  // 根据可选项和当前选择索引返回已选中的时间
  const getDayjs = (mode: string) => {
    const { dateTime } = props
    const res = []
    // 此处遍历dateTime和遍历source的区别在于一维数组还是二维数组
    for (let i = 0; i < source.length; i++) {
      let time = '',
        token = ''
      // source[i].item.length为可选项的列数
      for (let j = 0; j < source[i].item.length; j++) {
        // source[i].item[j]为每一列的数据组成的数组,value[i][j]为对应这列数组的选中值
        const select = source[i].item[j][value[i][j]]
        // 对'今天'这个值进行特殊处理，其他直接返回当前的选择字符串
        time += (select === '今天' ? dayjs().format('M月D日') : select) + '-'
        // 对于二维数组取i、j；对于一维数组取j
        const item = markMultiDateTime ? dateTime[i][j] : dateTime[j]
        // @ts-ignore
        token += (item.format || getToken(item.mode)) + '-'
      }
      // @ts-ignore
      res.push(dayjs(time, token)[mode]())
    }
    return markMultiDateTime ? res : res[0]
  }

  const onCancel = () => {
    const { onCancel } = props
    onCancel && onCancel()
  }

  // 标准格式化选择器
  const getToken = (mode) => {
    return {
      year: 'YYYY年',
      month: 'M月',
      day: 'D日',
      hour: 'H时',
      minute: 'm分',
      second: 's秒',
    }[mode]
  }

  return (

    <View
      className='dateTime'
    // style={{ width: dateTime.reduce((acc, val) => acc.concat(val), []).length < 4 ? '80%' : '100%' }}
    >
      <View className='section'>
        {source.map((element, index) => (
          // <PickerView
          //   key={'element' + index}
          //   indicator-style='height: 50px;'
          //   value={value[index]}
          //   onChange={(e) => onChange(e, index)}
          // // 使用acc.concat将多维数组打平成一维数组再求数组长度
          // >
          //   {element.item.map((item, elementIndex) => (
          //     <PickerViewColumn key={elementIndex}>
          //       {item.map((time) => (
          //         <View key={time}>{time}</View>
          //       ))}
          //     </PickerViewColumn>
          //   ))}
          // </PickerView>
          <View>{element.item.map((item) => (
            <View>
              {
                item.map(time => (
                  <View>{time}</View>
                ))
              }
            </View>
          ))}</View>
        ))}
      </View>
      <View className='handle'>
        <Button className='cancel' type='default' size='default' onClick={onCancel}>
          取消
          </Button>
        <Button className='confirm' type='primary' size='default' onClick={onConfirm}>
          确定
          </Button>
      </View>
    </View>
  )
}
export default DateTimePicker

// MsaLineAdd.config = {
//   navigationBarTitleText: "新增巡线",
// } as Config;


